<template>
    <div class="designer-card">
        <div class="designer-user">
            <img
                class="designer-avatar"
                src="https://via.placeholder.com/60x60?text=Logo"
                alt="店铺logo"
            />
            <div class="user-profile">
                <h1 class="name">睿智设计</h1>
                <p class="profile">销售量 1.5w+ · 粉丝数 99 · 作品数 20</p>
            </div>
            <button class="like-btn accent-black">已关注</button>
            <button class="like-btn">+ 关注</button>
        </div>

        <!-- 商品列表 -->
        <div class="good-ul" v-if="props.showGood">
            <HeatGood
                class="good-li"
                v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
                :key="index"
            >
            </HeatGood>
        </div>
    </div>
</template>
<script setup lang="ts">
import HeatGood from "@/components/HeatGood.vue";
const props = defineProps({
    showGood: {
        type: Boolean,
        default: true,
    },
});
</script>
<style scoped lang="scss">
.designer-card {
    background: #ffffff;
    padding: 30rpx 0 20rpx 16rpx;
    .designer-user {
        display: flex;
        align-items: center;
        height: 128rpx;
        .designer-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
        }
        .user-profile {
            margin: 0 20px;
            .name {
                height: 38rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #222222;
                line-height: 38rpx;
            }
            .profile {
                height: 28rpx;
                font-weight: 400;
                font-size: 20rpx;
                color: #6f6f6f;
                line-height: 28rpx;
                margin: 4px 0 0;
            }
        }
        .like-btn {
            width: 108rpx;
            height: 48rpx;
            background: #ffffff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #f25a27;
            font-weight: 400;
            font-size: 28rpx;
            color: #f25a27;
            text-align: center;
            line-height: 48rpx;
            padding: 0;
            .active {
                border: 2rpx solid #b7b7b7;
                color: #b7b7b7;
            }
        }
    }

    .good-ul {
        width: calc(100vw - 32rpx);
        display: flex;
        gap: 16rpx;
        overflow: auto;
    }
}
</style>
